<template>
	<view class="container">
		<view class="content">
			<view class="imgs-box" v-if="sourceInfo.type == 0">
				<!-- ocr -->
				<view style="display: flex;width: 90%;margin: 0 auto;">
					<view class="text-left" style="display: flex;align-items: center;flex: 1;">
						<view style="margin-right: 20rpx;color:rgba(0,0,0,.5);font-size: 30rpx;">保留格式</view>
						<u-switch v-model="switchVal" size="20" active-color="#1acc89" @change="setResFormat">
						</u-switch>
					</view>
					<view class="text-right">
						<u-button @click="imgPreview(0,[sourceInfo.img_full_path])" size="small" color="#fef0f0"
							:customStyle="{color:'#f56c6c'}" text="查看原图">
						</u-button>
					</view>
				</view>
				<view class="title-content">
					<u--textarea v-model="resultContent" height="320" confirmType="done" count maxlength="6000">
					</u--textarea>
				</view>
			</view>
			<!-- 内容审核 -->
			<view class="auth-box" v-if="sourceInfo.type == 1">
				<view class="editor-content">
					<view class="rounded border result">
						<editor id="editor" class="textarea" placeholder="请输入文案" @ready="onEditorReady">
						</editor>
					</view>
				</view>
				<view class="result-content">
					<view class="rounded border result">
						<view v-if="!sourceInfo.auth_content.conclusionType" style="color: rgba(0,0,0,.5);">在此处查看审核结果
						</view>
						<view v-if="sourceInfo.auth_content.conclusionType == 1">文本内容合规</view>
						<block v-if="sourceInfo.auth_content.conclusionType == 2"
							v-for="(item,key) in sourceInfo.auth_content.result" :key="key">
							<view>
								<text style="color: orangered;">{{item.msg}}</text>: {{item.words}}
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能按钮区域 -->
		<view class="tools-btn">
			<block v-if="sourceInfo.type == 0">
				<!-- ocr图文识别 -->
				<view class="tools-btn-item">
					<u-button color="linear-gradient(-90deg,#26B3A0, #96E8BA)" shape="circle" icon="file-text"
						iconColor="#ffffff" text="复制文案"
						@click="copyContent(sourceInfo.result_content.deal_content)"></u-button>
				</view>
			</block>
			<block v-if="sourceInfo.type == 1">
				<!-- 内容审核 -->
				<view class="tools-btn-item">
					<u-button color="linear-gradient(-90deg,#26B3A0, #96E8BA)" icon="file-text" iconColor="#ffffff"
						shape="circle" text="复制文案" @click="copyContent(sourceInfo.auth_content.content)">
					</u-button>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sourceInfo: {},
				answer: '',
				qId: 0,
				switchVal: true,
				resultContent: ''
			};
		},
		onLoad(options) {
			this.qId = options.avg;
			this.getDetail();
		},
		methods: {
			async getDetail() {
				let that = this;
				//已经登录，则调用后端接口数据
				let res = await that.$http.requestApi('GET', 'ocr/user/getSourceDetail', {
					avg: that.qId,
					loginType: 1
				});
				that.sourceInfo = res.data;
				that.setResFormat(that.switchVal)
			},
			copyAnswer() {
				uni.setClipboardData({
					data: this.questionInfo.qa_data.answer, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: "复制成功",
							icon: 'none'
						})
					}
				});
			},
			setResFormat(e) {
				let result_content = JSON.parse(JSON.stringify(this.sourceInfo.result_content));
				if (e) {
					//带格式
					this.resultContent = result_content.format_content;
				} else {
					//不带格式
					this.resultContent = result_content.deal_content;
				}
			},
			//editor编辑器
			onEditorReady() {
				let that = this;
				uni.createSelectorQuery().select('#editor').context((res) => {
					that.editorCtx = res.context;
					if (that.sourceInfo.type == 1) {
						that.editorCtx.setContents({
							html: that.sourceInfo.auth_content.format_content
						});
					}
				}).exec();
			},
			imgPreview(index, imgArr) {
				let that = this;
				uni.previewImage({
					current: index,
					urls: imgArr
				});
			},
			copyContent(content) {
				if (content == '') {
					uni.showToast({
						title: '复制内容不存在',
						icon: 'none'
					});
					return false;
				}
				uni.setClipboardData({
					data: content, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: "复制成功",
							icon: "none"
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 240rpx;

		.content {
			color: #606266;
			white-space: pre-wrap;
			padding: 30rpx 0;

			.imgs-box {
				width: 100%;

				.title-content {
					width: 92%;
					margin: 30rpx auto;
				}

				.img-checkbox {
					display: flex;
					flex-wrap: wrap;
					width: 96%;
					margin: 20rpx auto;

					.img-item {
						width: 48%;
						margin: 4rpx 1%;
						position: relative;

						.img-checkbox-item {
							position: absolute;
							right: -8rpx;
						}

						image {
							width: 100%;
							border-radius: 10rpx;
						}
					}
				}
			}

			.editor-content {
				.result {
					height: 400rpx;
					padding: 20rpx;
					background-color: #fff;
					overflow: auto;
				}
			}

			.result-content {
				margin: 30rpx auto;

				.result {
					height: 400rpx;
					padding: 20rpx;
					background-color: #fff;
					overflow: auto;
				}
			}
		}

		.tools-btn {
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			height: calc(env(safe-area-inset-bottom) + 50px);
			height: calc(constant(safe-area-inset-bottom) + 50px);
			padding-top: 20rpx;
			background-color: #fff;
			box-shadow: -6rpx -6rpx 6rpx #eee;
			z-index: 10;

			.tools-btn-item {
				flex: 1;
				margin: 0 20rpx;
			}
		}
	}
</style>